<template>
  <div>
    <video ref="videoPlayer" class="video-js vjs-default-skin" controls></video>
  </div>
</template>

<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
import "videojs-contrib-hls";

export default {
  name: "HlsPlayer",
  props: {
    src: {
      type: String,
      required: true,
    },
  },
  mounted() {
    this.initPlayer();
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  },
  methods: {
    initPlayer() {
      this.player = videojs(this.$refs.videoPlayer, {
        controls: true,
        autoplay: false,
        preload: "auto",
      });

      this.player.src({
        src: this.src,
        type: "application/x-mpegURL",
      });
    },
  },
};
</script>

<style scoped>
.video-js {
  width: 100%;
  height: 400px;
}
</style>
